<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>书城首页</title>
    <!--引入vue、element-ui、axios；注意：vue要在element-ui之前-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script src="/js/axios.helper.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css" rel="stylesheet">
    <style>
        .el-row {
            margin-bottom: 20px;
            &:last-child {
                 margin-bottom: 0;
             }
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
            /* 设置水平、垂直居中 */
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <!--element官网：Layout 布局，通过基础的 24 分栏，迅速简便地创建布局。-->
                <!--第一行：头部-->
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-link :href="'/index.html'">蜗牛学苑</el-link>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <!--第二行：搜索-->
                <el-row>
                    <!--左边: 搜索-->
                    <el-col :span="12">
                        <el-form :inline="true" :model="condition" class="demo-form-inline">
                            <el-form-item label="请输入">
                                <el-input v-model="condition.keyword" placeholder="书名/作者/类型"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="queryBook">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <!--右边: 个人中心-->
                    <el-col :span="12">
                        <div style="text-align: right">
                            <span v-if="realName == ''">
                                <el-link type="info" :href="'/login.html'">登录</el-link>
                                <el-link type="info" :href="'/register.html'">注册</el-link>
                            </span>
                            <span v-else>
                                欢迎你，{{realName}}
                                <el-link type="info" @click="logout">退出系统</el-link>
                            </span>

                            <el-link type="info">个人中心</el-link>
                            <el-link type="info" :href="'/cart.html'">我的购物车</el-link>
                            <el-link type="info" :href="'/order.html'">我的订单</el-link>
                        </div>
                    </el-col>
                </el-row>

                <!--第三行：面包屑 导航-->
                <el-row>
                    <el-col :span="24">
                        <el-breadcrumb separator="/">
                            <!-- 从后台获取所有类别，v-for 遍历-->
                            <el-breadcrumb-item v-for="type in typeList">
                                <el-link
                                        type="info"
                                        :href="'/index/showBookList?typeId=' + type.id"
                                        style="color:gray;font-weight: normal">{{type.name}}</el-link>
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-col>
                </el-row>

                <!--第四行： 精品推荐-->
                <el-row>
                    <el-col :span="24">
                        <div>
                            <p style="font-size: 22px; color: lightgray; font-weight: bold; font-family: 微软雅黑">精品推荐</p>
                        </div>
                    </el-col>
                </el-row>
                <!--第五行： Top10 列表-->
                <el-row>
                    <el-col :span="24">
                        <div v-for="book in top10List" style="float: left; margin-right: 50px">
                            <div>
                                <el-image :src="book.imgsrc" style="width: 150px; height: 150px;"></el-image>
                            </div>
                            <div>
                                <p>书名：<span v-text="book.name"></span></p>
                                <p>价格：<span v-text="book.price"></span></p>
                                <p>
                                    <el-link type="info" :href="'/index/showBookDetail?bookId=' + book.id">查看详情</el-link>
                                    <el-button type="info" plain @click="addCart(book.id)">加入购物车</el-button>
                                </p>
                            </div>
                        </div>
                    </el-col>
                </el-row>


            </el-main>
        </el-container>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data(){
            return {
                // 搜索对象
                condition: {
                    keyword: ""
                },
                // 分类
                typeList: [],
                // 精品推荐Top10
                top10List: [],
                realName: ''
            }
        },
        methods:{
            // 加入购物车
            addCart(bookId){
                axios.post(`/cart/add/${bookId}`).then(resp=>{
                    if (resp.data.code == 200) {
                        this.$message.success('添加购物车成功！');
                    }
                }).catch(ex=>{
                    console.log('商品添加到购物车失败：',ex)
                })
            },
            // 通过es完成索引库的搜索
            queryBook(){
                // 跳转道搜索页面 search.html
                location.href = '/index/toSearch?keyword=' + this.condition.keyword;
            },
            // 查询图书分类
            queryBookType(){
                axios.get('/booktype').then(resp=>{
                    console.log('booktype',resp)
                    this.typeList = resp.data.data;
                })
            },
            // 查询图书Top10
            getTop10List() {
                axios.get('/book/top10List').then(resp=>{
                    console.log('top10:',resp);
                    this.top10List = resp.data.data;
                })
            },
            getCurrentUser(){
                axios.get('/user/getCurrentUser').then(resp=>{
                    console.log('getCurrentUser2',resp)
                    if (resp.data.data != null && resp.data.data != '') {
                        this.realName = resp.data.data;
                    } else {
                        this.realName = '';
                    }
                })
            },
            logout(){
                this.$confirm('此操作将要退出系统，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    localStorage.removeItem("token");
                    location.href = "/index.html"
                });
            }
        },
        // 生命周期钩子函数，在创建vue实例后自动执行
        created(){
            this.queryBookType();
            this.getTop10List();
            this.getCurrentUser(); // 登录后显示用户名
        }
    })
</script>
</html>